@{   
    
    Layout = "~/Views/Shared/_LayoutJtable.cshtml";    
}
@{ViewBag.Title = "Gestione Datos";}
@section CssImport{<link href="@Url.Content("~/Scripts/validationEngine/validationEngine.jquery.css")" rel="stylesheet" type="text/css" />}
@section JavascriptImport{
<script type="text/javascript" src="@Url.Content("~/Scripts/validationEngine/jquery.validationEngine.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/validationEngine/jquery.validationEngine-en.js")"></script>}
<div class="filtering">
<form>
<label>Indroduzca texto para filtrar: <input type="text" name="filter" id="filter" /></label>
<button type="submit" id="LoadRecordsButton" class="button medium green">Filtrar Datos</button>
</form></div>
<div id="MyTableContainer"></div>
<script type="text/javascript">
    $(document).ready(function () {
        $('#MyTableContainer').jtable({
            title: 'Persona',
            paging: true,
            pageSize: 50,
            sorting: true,
            defaultSorting: 'Id ASC',
            actions: {
                listAction: '@Url.Action("JSONPagedListByFilter")',
                deleteAction: '@Url.Action("JSONDelete")',
                updateAction: '@Url.Action("JSONUpdate")',
                createAction: '@Url.Action("JSONCreate")'
            },
            fields:
         {
             Id: {
                 key: true,
                 create: false,
                 edit: false,
                 list: false
             }
             ,
             Nombre: {
                 title: 'Nombre',
                 create: true,
                 edit: true,
                 list: true,
                 inputClass: 'validate[required]',
                 sorting: false
             }
             ,
             ApellidoPaterno: {
                 title: 'ApellidoPaterno',
                 create: true,
                 edit: true,
                 list: true,
                 inputClass: 'validate[required]',
                 sorting: false
             }
             ,
             ApellidoMaterno: {
                 title: 'ApellidoMaterno',
                 create: true,
                 edit: true,
                 list: true,
                 inputClass: 'validate[required]',
                 sorting: false
             }
             ,
             Genero: {
                 title: 'Genero',
                 list: false,
                 type: 'radiobutton',
                 options: { '1': 'Masculino', '2': 'Femenino', '0': 'No Declarado' }
             },        

             FechaNacimiento: {
                 title: 'FechaNacimiento',
                 create: true,
                 edit: true,
                 list: true,
                 type: 'date',
                 displayFormat: 'dd/mm/yy',
                 inputClass: 'validate[required]',
                 sorting: false
             }
             ,
             CedulaIdentidad: {
                 title: 'C.I.',
                 create: true,
                 edit: true,
                 list: true,
                 inputClass: 'validate[required]',
                 sorting: false
             }
             ,
             CIEmitidoEn: {
                 title: 'Emitido en',
                 create: true,
                 edit: true,
                 list: true,
                 inputClass: 'validate[required]',
                 sorting: false
             }
             ,
             Email: {
                 title: 'Email',
                 create: true,
                 edit: true,
                 list: true,
                 sorting: false
             }             
            
         },
            formCreated: function (event, data) { data.form.validationEngine(); },
            formSubmitting: function (event, data) { return data.form.validationEngine('validate'); },
            formClosed: function (event, data) { data.form.validationEngine('hide'); data.form.validationEngine('detach'); }
        });
        $('#LoadRecordsButton').click(function (e) { e.preventDefault(); $('#MyTableContainer').jtable('load', { filter: $('#filter').val() }); });
        $('#LoadRecordsButton').click();
    });
</script>

